<template>
  <el-table
    :data="tableData"
    style="width: 1000px;font-size: 20px"
    :row-style="{height:'55px'}">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.itemName }}</span>
          </el-form-item>
          <el-form-item label="申请时间">
            <span>{{ props.row.date }}</span>
          </el-form-item>
          <el-form-item label="所有者账号">
            <span>{{ props.row.lender_id }}</span>
          </el-form-item>
          <el-form-item label="联系方式">
            <span>{{ props.row.borrowerTel }}</span>
          </el-form-item>
          
          <el-form-item label="申请时长">
            <span>{{ props.row.rentalTime }}</span>
          </el-form-item>

          <el-form-item label="审批状态">
            <span>{{ props.row.state }}同意交易state=1/拒绝state=-1/完成交易state=2</span>
          </el-form-item>
          
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="itemName">
    </el-table-column>
    <el-table-column
      label="交易状态"
      prop="state">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    created(){
      var self = this;
      let config = {
          headers: {'Content-Type': 'application/json','Authorization':localStorage.getItem("token")}
        }
      var id = localStorage.getItem("id");
      this.$axios
      .get('/transaction/byBorrow_id?borrow_id=' + id,config)
      .then(function (response) {
        var array = response.data
        // handle success
        console.log(response);
        console.log(array);

        for (var i=0;i<array.length;i++){ 
          // 把状态码装换成中文状态描述
          var stateCode = array[i].state
          var stateDesc = ''
          if(stateCode == 0){
            stateDesc = '待申请'
          }
          if(stateCode == -1){
            stateDesc = '申请被拒绝'
          }
          if(stateCode == 1){
            stateDesc = '同意申请'
          }
          if(stateCode == 2){
            stateDesc = '交易完成'
          }
          let item = {
            date:array[i].time,
            price:array[i].amount,
            borrow_id:array[i].borrow_id,
            lender_id:array[i].lender_id,
            rentalTime:array[i].rentalTime + '日',
            // state:array[i].state,
            state:stateDesc,
            id:array[i].id,
            borrow_id:array[i].borrow_id,
            itemName:array[i].itemName,
            borrowerTel:array[i].borrowerTel
          }
          self.tableData.push(item)
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
      // always executed
     });
    },
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>